<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/23
 * Time: 0:00
 */
-->
<template>
  <div class="index">
    <div class="notice-sec">
      <div class="title-box">
        <h2><img src="../../assets/img/home/announcement.png" alt=""/></h2>
        <div class="line"></div>
        <button class="more-btn" @click="$router.push('/announcement')">+MORE</button>
      </div>

      <div class="notice-box">
        <div class="notice-box-fl">
          <div class="notice-img01">
            <img src="../../assets/img/home/img01.png" alt=""/>
          </div>

          <div class="clr"></div>

          <div v-if="announcementData.length > 0" class="notice-list">
            <h3>
              <a @click="toAnn(announcementData[0].announcementId)">
                - {{ announcementData[0].title }}
              </a>
            </h3>
            <ul>
              <template v-for="(item, index) in announcementData">
                <template v-if="index >= 1 && index <= 4">
                  <li :key="item.announcementId">
                    <a @click="toAnn(item.announcementId)">
                      - {{ item.title }}
                    </a>
                  </li>
                </template>
              </template>
            </ul>
          </div>
        </div>

        <div class="line-b"></div>

        <div class="notice-box-fr">
          <div v-if="announcementData.length > 5" class="notice-list">
            <ul>
              <template v-for="(item, index) in announcementData">
                <template v-if="index >= 5">
                  <li :key="item.announcementId">
                    <a @click="toAnn(item.announcementId)">
                      - {{ item.title }}
                    </a>
                  </li>
                </template>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>


    <div class="media-sec">
      <div class="title-box">
        <h2><img src="../../assets/img/home/activity.png" alt=""/></h2>
        <div class="line"></div>
        <button class="more-btn" @click="$router.push('/activity')">+MORE</button>
      </div>

      <div class="media-box">
        <div class="media-box-fl">
          <ul v-if="activityData.length">
            <template v-for="(item, index) in activityData">
              <li v-if="index <= 2" :key="item.activityId">
                <div class="img-box"><img :src="item.thumb" alt=""/>
                </div>
                <div class="media-infor" @click="toAct(item.activityId)">
                  <h5>
                    <a>
                      {{ item.activityName }}
                    </a>
                  </h5>
                  <p v-html="item.content.replace(/<\/?.+?>/g, '')"></p>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <div class="line2"></div>

        <div class="media-box-fr">
          <div class="box-fr-infor">
            <ul v-if="activityData.length >= 4">
              <template v-for="(item, index) in activityData">
                <li class="box-fr-li" v-if="index >= 3" :key="item.activityId">
                  <div class="month-box">
                    <span class="day">{{ new Date(item.time).getDate() }}</span>
                    <span class="month">{{ new Date(item.time).getMonth() + 1 }} 月</span>
                  </div>
                  <div class="box-fr-inf" @click="toAct(item.activityId)">
                    <h5>
                      <a>
                        {{ item.activityName }}
                      </a>
                    </h5>
                    <p v-html="item.content.replace(/<\/?.+?>/g, '')"></p>
                  </div>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainIndex",
  props: {},
  data() {
    return {
      announcementData: [],
      activityData: []
    }
  },
  created() {
    this.getData();
  },
  mounted() {
  },
  methods: {
    /**
     * 获取数据
     */
    getData() {
      Promise.all([
        this.axios.post(this.$store.state.api + '/announcement/list?pageNum=1&pageSize=14', {}),
        this.axios.post(this.$store.state.api + '/activity/list?pageNum=1&pageSize=7', {})
      ]).then((response) => {
        this.announcementData = response[0].data.data.records;
        this.activityData = response[1].data.data.records;
      }).catch((error) => {
        console.log(error);
      });
    },

    /**
     * 跳转
     *
     * @param id
     */
    toAnn(id) {
      this.$router.push('/detail/ann/' + id)
    },

    toAct(id) {
      this.$router.push('/detail/act/' + id)
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.index {
  /*Title*/

  .title-box {
    position: relative;
    height: 55px;
    overflow: hidden;

    h2 {
      position: absolute;
      overflow: hidden;
      left: 0;
      top: 0;
      width: 111px;
    }

    img {
      width: 100%;
    }

    .line {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 884px;
      height: 0;
      border: 1px solid #707070;
    }

    .more-btn {
      position: absolute;
      bottom: 10px;
      right: 0;
      width: 112px;
      height: 31px;
      background: #000;
      -moz-border-radius: 19px;
      border-radius: 19px;
      color: #fff;
      text-align: center;
      border: 0;
      cursor: pointer;
    }
  }

  /*官方公告*/

  .notice-box {
    padding: 38px 0 58px 0;
    width: 100%;
    overflow: hidden;

    .notice-box-fl {
      float: left;
      width: 460px;
      overflow: hidden;

      .notice-img01 {
        float: left;
        width: 284px;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      .intro-p {
        float: left;
        padding: 20px 0 0 24px;
        width: 210px;
        overflow: hidden;

        p {
          width: 100%;
          height: 140px;
          line-height: 20px;
          color: #9A9A9A;
          font-size: 14px;
          overflow: hidden;
        }
      }
    }

    .line-b {
      float: left;
      margin: 0 38px;
      width: 1px;
      height: 396px;
      background: #D4D4D4;
    }

    .notice-box-fr {
      float: left;
      width: 460px;
      overflow: hidden;
    }

    .notice-list {
      width: 430px;
      overflow: hidden;

      li a {
        color: #707070;
        font-size: 18px;
        line-height: 32px;
        font-weight: 300;
        font-family: 'Microsoft YaHei', serif;
        cursor: pointer;
      }

      h3 {
        padding: 14px 0;
        font-weight: bold;
        font-family: 'Microsoft YaHei', serif;
        cursor: pointer;

        a {
          color: #000;
          font-size: 24px;
        }
      }
    }
  }

  /*行业媒体*/

  .media-sec {
    width: 100%;
    overflow: hidden;

    .media-box {
      padding: 38px 0 48px 0;
      overflow: hidden;

      .line2 {
        float: left;
        margin: 0 38px;
        width: 1px;
        height: 416px;
        background: #D4D4D4;
      }

      .media-box-fl {
        float: left;
        width: 460px;

        .media-infor {
          float: left;
          width: 315px;
          overflow: hidden;
          cursor: pointer;

          p {
            width: 100%;
            line-height: 20px;
            height: 80px;
            font-size: 14px;
            color: #707070;
            overflow: hidden;
          }

          h5 {
            padding: 5px 0;
            font-weight: 400;

            a {
              font-size: 18px;
              color: #3d3d3d;
              line-height: 24px;
              font-weight: 600;
            }
          }
        }

        ul li {
          padding-bottom: 30px;
          overflow: hidden;
          display: flex;

          &:last-child {
            padding-bottom: 0;
          }
        }

        .img-box {
          float: left;
          width: 96px;
          margin-right: 23px;
          overflow: hidden;
          height: 108px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 6px;

          img {
            width: 100%;
          }
        }
      }
    }

    /*行业媒体右*/

    .media-box-fr {
      float: left;
      width: 460px;
      overflow: hidden;

      .box-fr-infor {
        width: 100%;
        overflow: hidden;

        .box-fr-li {
          padding-top: 48px;
          overflow: hidden;

          &:first-child {
            padding-top: 0;
          }

          .month-box {
            float: left;
            padding: 9px 23px 9px 0;
            border-right: 1px solid #C5C5C5;
            color: #707070;

            .day {
              display: block;
              font-size: 24px;
              line-height: 28px;
            }

            .month {
              display: block;
              font-size: 18px;
              line-height: 20px;
            }
          }

          .box-fr-inf {
            float: left;
            padding-left: 23px;
            overflow: hidden;
            cursor: pointer;

            p {
              width: 360px;
              line-height: 20px;
              height: 40px;
              font-size: 14px;
              color: #707070;
              overflow: hidden;
            }

            h5 {
              font-weight: 400;
              color: #707070;
              width: 360px;

              a {
                font-size: 18px;
                width: 360px;
                color: #3d3d3d;
                line-height: 24px;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}
</style>